<template>
  <n-modal v-model:show="isVisible" title="编辑属性" preset="dialog" @close="onClose" style="height: 400px;width: 700px">
    <n-form @submit.prevent="handleSubmit" label-width="120px" class="form-container">
      <div class="form-row" style="margin-top: 20px">
        <n-form-item label="产品分类：" path="categoryName">
          <n-cascader
              v-model:value="form.categoryId"
              style="width:160px"
              size="small"
              :options="props.option"
              filterable
          >
          </n-cascader>
        </n-form-item>
      </div>

      <div class="form-row">
        <n-form-item label="产品规格：" path="specification" style="width: 250px">
          <n-input v-model:value="form.specification" placeholder="请输入产品规格"/>
        </n-form-item>

        <n-form-item label="产品颜色：" path="color"  style="margin-left: 20px;width: 250px">
          <n-input v-model:value="form.color" placeholder="请输入产品颜色"/>
        </n-form-item>
      </div>

      <div class="form-row">
        <n-form-item label="产品材质：" path="material" style="width: 250px">
          <n-input v-model:value="form.material" placeholder="请输入产品材质"/>
        </n-form-item>

      </div>

      <!-- 提交按钮 -->
      <div class="submit-row">
        <n-form-item>
          <n-button type="primary" native-type="submit" @click="handleSubmit">更新</n-button>
        </n-form-item>
      </div>
    </n-form>
  </n-modal>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useUserStore } from "@/store/index.js";
import api from '@/api/admin.js';
import { List } from "echarts";

const userStore = useUserStore();
const id = userStore.getId();
const option = ref([]);

const emit = defineEmits(['updatePage']);
const props = defineProps({
  show1: {
    type: Boolean,
    required: true,
  },
  onClose: {
    type: Function,
    required: true,
  },
  option: {
    type: List,
    required: true,
  },
  attribute: {
    type: Object,
    required: true,
  }
});

const isVisible = ref(props.show1);
watch(() => props.show1, (newVal) => {
  isVisible.value = newVal;
  if (newVal) {
    // 当对话框显示时，将传递过来的属性值填充到表单中
    form.value = { ...props.attribute };
  }
});

const form = ref({
  id: null,
  categoryId: null,
  specification: '',
  color: '',
  material: '',
});

const handleSubmit = async () => {
  try {
    const res = await api.updateProductAttribute(form.value);  // 调用更新接口
    if (res.code === 200) {
      emit("updatePage");
    } else {
      $message.error(res.message);
    }
  } catch (err) {
    $message.error("更新失败！");
  } finally {
    clear();
    props.onClose();
  }
};

const clear = () => {
  form.value = {
    id: null,
    categoryId: null,
    specification: '',
    color: '',
    material: '',
  };
};
</script>

<style scoped>
.form-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
}

.form-row {
  display: flex;
  align-items: center;
  width: 100%;
}

.form-row > n-form-item {
  flex: 1;
}

.submit-row {
  justify-content: center;
  display: flex;
  width: 100%;
}
</style>
